<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">
        banner基本信息
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         标题:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入标题" v-model="b_title" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         描述信息:
      </el-col>
      <el-col :span="14">
        <el-input placeholder="请输入描述信息" v-model="extra_desc" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         位置:
      </el-col>
      <el-col :span="7">
        <template>
          <el-select v-model="pos"
            clearable
            :disabled="is_modifly"
            placeholder="广告位置">
            <el-option
              v-for="item in posList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         跳转动作:
      </el-col>
      <el-col :span="7">
        <template>
          <el-select v-model="act"
            clearable
            :disabled="is_modifly"
            placeholder="跳转动作">
            <el-option
              v-for="item in actList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px" v-if="act=='url'">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         跳转地址:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="跳转地址" v-model="param" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         状态:
      </el-col>
      <el-col :span="7" class="myLineHeight_40px">
        <template>
          <el-radio-group v-model="status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </template>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">
        图片及跳转信息
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="17" :offset="3">
        <el-upload
          class="avatar-uploader"
          :disabled="is_modifly"
          :action="uploadUrl"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :data="postData"
          :on-success="handleAvatarSuccess">
          <img v-if="thumbnailUrl" :src="thumbnailUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span style="color: #f00">上传图片尺寸比例2:1,建议图片大小为300KB,格式为JPG/PNG。</span>
      </el-col>
    </el-row>
    
    <el-row class="myPaddingBottom_10px">
      <el-col :span="7" :offset="3">
        <el-button type="primary" class="myBgGreen" v-if="type=='add'" @click="onAddBanner">新 增</el-button>
        <el-button type="primary" class="myBgGreen" v-if="type=='update' && isShow(143)" @click="onEdit">保 存</el-button>
        <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
      </el-col>
    </el-row>

  </div>
</template>
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myMarginBottom_10px{
    margin-bottom: 20px;
  }
  .avatar-uploader{
    float: left;
    margin-right: 10px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: inline-block;
  }
</style>
<script>
  import { addBanner , getQNToken , getBannerDetail , updateBanner } from '@/api/contentMGT';
  import { QINIU_API , QINIU_UP_API } from '@/config/baseUrl';
  export default {
    data(){
      return{
        title: "广告位管理",
        id: "",
        type:"",
        is_modifly:false,
        keyword:"",
        orderidx:"",
        time:"",
        range:"",
        rangeList:[],
        newsStatus:1,
        responseUrl:"",
        imageUrl:"",
        saveImageUrl:"",
        content:'',
        editorOption:{},
        onPreviewDialog:false,
        newsTitle:"",

        b_title:"",
        extra_desc:"",
        status:1,//状态
        pos:"",
        posList:[{label:"首页",value:"home"}],
        actList:[{label:"不响应",value:"none"},{label:"跳转到web",value:"url"}],
        param:"",
        act:"",
        uploadUrl:QINIU_UP_API,
        thumbnailUrl:"",
        postData:{
          token:""
        },
      }
    },
    components: {
        
    },
    created(){
      document.title=this.title;
      this.id = this.$route.query.id;
      this.type = this.$route.query.type;
       
      if(this.type=='add'){
        this.onGetToken();
      }
      if(this.type=='update'){
        this.is_modifly=false;
        this.onGetToken();
        this.onGetBannerDetail();
      }
      if(this.type=='info'){
        this.is_modifly=true;
        this.onGetBannerDetail();
      }
      
    },    
    methods:{   
      onBack(){//返回
        let vm=this;
        window.localStorage.setItem('pageNum',vm.$route.query.pageNum||1);
        vm.$router.go(-1);
      },
      onGetToken(){//拉取七牛token
        let vm=this;
        getQNToken().then(response => {
          let res=response.data.up_token;
          vm.postData.token=res;
        }).catch(error => {
          // console.log("失败")
        })
      },
      handleAvatarSuccess(res, file) {
        this.thumbnailUrl = QINIU_API + res.key;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
      onAddBanner(){
        let vm=this;
        if(!vm.b_title || !vm.extra_desc || !vm.thumbnailUrl || !vm.pos || !vm.act){
          vm.$message.error("请将数据填写完整！");
          return;
        }
        let params={
          title:vm.b_title,//标题
          extra_desc:vm.extra_desc,//描述
          thumbnail:vm.thumbnailUrl,//缩略图
          pos:vm.pos,//位置
          act:vm.act,//跳转动作
          params:`{"url": "${vm.param}"}`,//json字符串
          status:vm.status//状态
        }
        // console.log(params)
        addBanner(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.onBack();
          // console.log(res);
        }).catch(error => {
          vm.$message.error("执行失败！");
          // console.log(error)
        })
      },
      onGetBannerDetail(){//拉取banner详情
        let vm=this;
        getBannerDetail(vm.id).then(response =>{
          let res=response.data;
          vm.b_title=res.title;
          vm.extra_desc=res.extra_desc;
          vm.thumbnailUrl=res.thumbnail;
          vm.pos=res.pos;
          vm.act=res.act;
          vm.param=JSON.parse(res.params).url;
          vm.status=res.status;
          // console.log(res)
        }).catch(error => {
          // console.log(error)
        })
      },
      onEdit(){//修改
        let vm=this;
        if(!vm.b_title || !vm.extra_desc || !vm.thumbnailUrl || !vm.pos || !vm.act){
          vm.$message.error("请将数据填写完整！");
          return;
        }
        let params={
          title:vm.b_title,//标题
          extra_desc:vm.extra_desc,//描述
          thumbnail:vm.thumbnailUrl,//缩略图
          pos:vm.pos,//位置
          act:vm.act,//跳转动作
          params:`{"url": "${vm.param}"}`,//json字符串
          status:vm.status//状态
        }
        updateBanner(vm.id,params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.onBack();
          // console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！");
          // console.log(error)
        })
      }
      
    }
  
  }


</script>




